@function px2Sp($size) {
  @return $size * 0.75;
}

.main-wrapper {
  background-color: var(--base-bgColor);
  .main-content {
    margin-top: 6px;
    background-color: var(--white-base);
    height: calc(100vh - 75px - 6px);
    padding: 54px 20px 0;
    box-sizing: border-box;
    // 充值信息及充值说明
    .recharge {
      .recharge-title {
        font-size: 16px;
        color: var(--base-color);
      }
      .recharge-amount {
        width: 100%;
        margin-top: 30px;
        border-bottom: 1px solid var(--base-bgColor);
        display: flex;
        justify-content: space-between;
        padding-bottom: 4px;
        box-sizing: border-box;
        align-items: flex-end;
        .amount-count {
          flex: 1;
          display: flex;
          align-items: flex-end;
          line-height: 1;
          .amount-unit {
            font-size: px2Sp(72px);
            color: var(--base-color);
          }
          .amount-paid {
            margin-left: 24px;
            overflow-x: scroll;
            display: block;
            max-width: 120px;
            width: 10px;
            border: none;
            font-size: px2Sp(72px);
            color: var(--primary-color);
            flex: 1;
          }
        }
        .amount-obtained-info {
          font-size: 12px;
          max-width: 120px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: var(--gray-medium);
          .amount-obtained {
            color: var(--red-dark);
          }
        }
      }
      .payment-instruction {
        font-size: 10px;
        color: var(--gray-medium);
        margin-top: 10px;
      }
    }
    // 充值方式
    .recharge-method {
      margin-top: 50px;
      .method-tit {
        font-size: 14px;
        color: var(--base-color);
      }
      .method-items {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .method-items-info {
          display: flex;
          align-items: center;
          p {
            margin-left: 10px;
            font-size: 14px;
            color: var(--base-color);
          }
        }
        .method-items-check {
          width: 20px;
          height: 20px;
          img {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
    // 充值按钮
    .btn {
      margin-top: 132px;
      margin-bottom: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      button {
        width: 300px;
        height: 36px;
        background-color: var(--primary-color);
        border-radius: 4px;
        color: var(--white-base);
        border: none;
      }
    }
  }
}
